COURSE GUIDEBOOK 


UX+WEB DESIGN 

MASTER COURSE 

WITH JOE NATOLI 

Everything you could ever want to know (and more) about 
strategizing, architecting, designing and coding successful 
websites that deliver powerful, positive user experiences! 
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DEFINITION: SECTION 1 - LECTURE 2 

Why are we doing this? 

What's the reason this website/app/system needs to exist? What problem does it 
solve, for you/your client and for users? 

Think about an idea you have for a website, an app or digital product of any kind. 
Write down why you think it should be created. 
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DEFINITION: SECTION 1 - LECTURE 4 

Three Key Questions: What’s Worth Doing? 

Anything of high importance and high feasibility must be done. 

What are your tradeoffs between importance and feasibility? Where do you think 
your proposed features fall on this chart? 
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DEFINITION: SECTION 1 - LECTURE 5 

Three Key Questions: What Are We Creating? 

You must write it down. 

Lean and Agile practices require meaningful documentation. That documentation 
should cover features, functionality, platform and content. 

Remember — that documentation does not have to be formal! 

Think about something you’re working on, or an idea you have for a website or an app. 
Write down what you’d be creating below. 
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DEFINITION: SECTION 1 - LECTURE 6 

Three Key Questions: What Value Does It Provide? 

Who’s your target audience? 


What experiences will be valuable or compelling to them? 


How will your offering be different from competitors (and substitutes)? 
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DEFINITION: SECTION 1 - LECTURE 7 SNACK BREAK! 

Competitive Analysis 

What are your tradeoffs between importance and feasibility? 

List multiple business opportunities 

for a real or made-up product. Rate each opportunity on a scale of 1-5 in each of the 
two categories below. 


Opportunity Importance Feasibility 




























Totals 


Middle score x number of opportunities = points available 

How will you "spend” your points? 
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Plot your results on the chart below. What will you focus on first? Next? Never ? 



0 


1 2 3 4 5 
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DEFINITION: SECTION 1 - LECTURE 9 

Identifying Business Goals 

What does the business need from the website? 

Who are the stakeholders for your project? 



What are the business’s goals and desired outcomes, and how will they be measured? 
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Who is the customer, and why will they use the website? 


What industry standards or regulations should influence what we design or build? 


Who are the competing organizations, products and services — both direct and 
indirect? 


How will we differentiate this website and its content from what they’re doing? 
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DEFINITION: SECTION 1 - LECTURE 10 SNACK BREAK! 

Identifying User Needs 

What do users need, want and expect? Interview potential or current users and ask 
the questions included in this lecture to determine the following: 

Is this website a B2B (Business to Business) or B2C (Business to Consumer) site? 

What do users expect to be able to do with the website? 


Why do these things matter to them? 


What are they using to do those things now? 


What would provide value to them — make their lives easier or better? 
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DEFINITION: SECTION 1 - LECTURE 12 EXERCISE 

Create your own decision path 
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DEFINITION: SECTION 1 - LECTURE 13 

Generating Requirements 

What are the requirements for your website? 

What things have you heard people — prospective users or customers or your client 
— say they need? 


What things do you think they actually need, based on your research, your user/ 
stakeholder interviews or other evidence? 


Again, based on your research, what things do you think may be useful or valuable to 
them that they don't know they need? 
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DEFINITION: SECTION 1 - LECTURE 18 

Smart Project Scoping 

The Buy-a-Feature Game 

"Buy a feature” is a simple and effective game that's been used by IT folks for years. 
It's great for getting people to understand the necessary tradeoffs in choosing 
features they’d like to see in the finished website. 

1. Create a list of website features. Create a listoffeaturesfora made-up 
website (or a current project) — 

no more than 30 features total. Consider: 

* Features suggested by users 

* Features suggested by your client 

* Features that have been implemented by rival websites 

Features should be user-focused (e.g. don't include "optimizing SQL queries”). 
Each feature should include a name and short description outlining whatthe 
feature is and what the benefits to the user are. 

2. Assign a price to each feature. This price related to the complexity to 
implement the feature — so a feature that's twice as complex as another 
should be twice as expensive. You don't need to be accurate with cost — the 
purpose is just to illustrate differences in complexity. 

3. Create feature cards. One card for each feature, including the feature name, 
what it does and how much it costs. Use the templates on the following page 
to create and print your cards. 

4. Give each player a budget. This is the amount they can spend on features. 
Giving them enough money to buy between 1/2 and 1/3 of the features 
available usually works well. 

5. Play the game. Hand out the money and the features list, and start the game. 
You play the role of shop keeper, answering questions and taking payment 
when a feature is purchased. Keep in mind: 

* In order to buy a feature, players have to explain why they 
want that feature. 

* The game continues until all money is spent, or players are 
done buying. Make it clear to players that it’s OK for money 
to be left over at the end ; you don’t want people buying 
features just to get rid of their unspent cash 
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[Feature name] ■ [Feature name] ■ [Feature name] 


[Feature description] 
Describe what the feature 
does and what the benefits 
are to the user. 


[Feature description] 
Describe what the feature 
does and what the benefits 
are to the user. 


[Feature description] 
Describe what the feature 
does and what the benefits 
are to the user. 


$COST m $COST II $COST 2 


[Feature name] 


[Feature description] 
Describe what the feature 
does and what the benefits 
are to the user. 


[Feature name] 


[Feature description] 
Describe what the feature 
does and what the benefits 
are to the user. 


[Feature name] 


[Feature description] 
Describe what the feature 
does and what the benefits 
are to the user. 


$COST 


[Feature name] 


[Feature description] 
Describe what the feature 
does and what the benefits 
are to the user. 


$COST 


[Feature name] 


[Feature description] 
Describe what the feature 
does and what the benefits 
are to the user. 


$COST 


[Feature name] 


[Feature description] 
Describe what the feature 
does and what the benefits 
are to the user. 








$COST 


$COST 


$COST 






































UX + Web Design Master Course | JoeNatoli 


GUIDEBOOK 


DEFINITION: SECTION 1 - LECTURE 18 

Planning for User Testing 

Create a basic user testing plan. 


Who are you're testing for? What type of user? Age, gender, job role (if applicable)? 
e.g. Women between 18 - 35. 


What are the most popular devices they’ll use? 
e.g. iPhone 5, iPad 2+, desktop (1024 pixels and up). 


What OS/browser combinations are most popular among your audience? 
e.g. Windows 8 Internet Explorer, OSX Safari, iOSX Firefox. 


What connection speeds do they have (3G, 4G, broadband)? 


How tech-savvy is your demographic? e.g. fairly tech-savvy, smartphone owner, social 
media user. 
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Prioritize browser & device support. 


FULLY SUPPORTED PARTIALLY SUPPORTED NOT SUPPORTED 

Devices, Browsers & Devices, Browsers & Devices, Browsers & 

Platforms Platforms Platforms 
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ARCHITECTURE: SECTION 2 - LECTURE 32 

Exercise: Identifying Content Workflows 

Ask questions of content stakeholders: 

Identify everyone and anyone associated with creating, editing, approving or 
requesting content. Set up a half- or full-day meeting with those people in the room 
and ask them the following questions — and diagram the answers as shown in the 
exercise video: 

What is your current process for 
creating and publishing content? 


Which parts of that process work well? Which don’t? 


Which people — in what roles — are 
responsible for the following tasks & activities? 

* Adding text, photos, video, Twitter feeds, forms, etc. 


* Creating new pages 


* Deleting pages and digital assets 


* Adding or updating metadata 


* Publishing content to a test server 


* Returning new or edited content with comments for revisions 
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* Scheduling content for publication 


* Formatting headers, tables, captions, links, etc. 


Can authors create new pages or just edit existing ones? 


Who is authorized to create subfolders (subdirectories)? 


Can authors delete pages? What about other digital assets like photos, videos, etc? 


Can editors approve content across the entire site or just the sections they're 
responsible for? 


What about content they own that spreads across multiple sections of the site? 


Do you need to manage multiple approvers (editors)? Are requests for approval 
delegated to other approvers if an assigned editor is out of the office? 


How should workflow be managed when multiple authors are working on the same 
page? 


Are content managers involved in the workflow process? Are they informed about 
publishing updates? Are they responsible for documenting changes in the system 
somewhere? 
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ARCHITECTURE: SECTION 2 - LECTURE 33 

5 States that affect context 

Write down any instances within the following states that may affect your IA: 


PHYSICAL: 


ENVIRONMENTAL: 


PREFERENTIAL: 


EMOTIONAL 


COGNITIVE: 
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ARCHITECTURE: SECTION 2 - LECTURE 39 EXERCISE 

Determining Information Priority 

Use this table to determine Information Priority, as shown in the video. Rank each 
information category with a number from 1-X (dependent on the number of 
categories). 1 is most important, X is least important. 


Category Client Rank User Rank 
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ARCHITECTURE: SECTION 2 - LECTURE 54 EXERCISE 

Determining Key Navigation Paths 

First: Identify valuable outcomes. 

1. What’s the value proposition? Is it clear why they should sign up or access 
specific information? If there’s no sense of reward, people won't take the risk — 
even if it's an incredibly tiny risk! 


2. What do users want to happen, and what do you (or your client) want to 
happen? What outcomes deliver the most value to both the user and the 
business? Think hard about this, because the things that people find valuable 
are not always as obvious as they seem. 


3. How many valuable outcomes exist, and how important is each? There may 
be multiple activities within your site that delver value, but they are not all 
equally important. If a user only follows one, which should it be? 


Next: Identify the direct paths to that value. 

1. Is the path to that value obvious? Are opportunities to interact visible? From 
the home page, can a user immediately see the path that gets them to their 
goal in the fastest or easiest manner? 


2. Does that path also answer questions? Does navigation provide a visible 
answer to "how do!».?” You’re not there to answer these questions in 
conversation — exposing key navigation paths, however, can and should. 
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Once you figure out what the critical pages and paths are, highlight them in your IA 
model, as shown in this example: 
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Then, expose those paths in your wireframe Ul design, as shown in these examples: 

ARCHITECTURE: SECTION 2 - LECTURE 58 


Prototype Sketching 


Use the space here to sketch quick wireframe prototypes. Focus on arranging 
elements, not visual design. Label elements, but don’t spend more than 2 minutes 
on each sketch: 
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YOUR SKETCHES 


NOTES 
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